<template>
    <el-dialog v-dialogDrag title="部门选择" :visible.sync="openDialog" width="450px" :append-to-body="true" @close="handleClose">
        <div class="department-picker__info">
            <span>已选中: <b>{{selectData.length}}</b> 项目</span>
            <el-button type="text" style="padding:0; margin-left:10px;" @click="handleCancelSelection">取消</el-button>
            <el-button type="primary" class="btn-selection" size="mini" @click="handleConfirmSelection">确认选择</el-button>
        </div>
        <div class="department-picker__container">
            <div class="department-panel__scroll">
                <el-tree ref="deptTreeRef" 
                    :data="departmentData" 
                    :default-checked-keys = defaultSelectKeys
                    node-key="id" 
                    show-checkbox
                    highlight-current
                    default-expand-all 
                    :expand-on-click-node="false" 
                    :check-on-click-node="true" 
                    :props="defaultProps"
                    @check="handleSelect">
                </el-tree>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import api from "@/api/Process/org.js"
export default {
    name: "DepartmentPicker",
    props: {
        open: {
            type: Boolean,
            default: false
        },
        multi: {
            type: Boolean,
            default: false
        },
        dataSource: {
            type: Array,
            default: (()=>[])
        }
    },
    data() {
        return {
            openDialog: this.open,
            departmentData: [],
            selectData:[],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
        }
    },
    computed: {
        defaultSelectKeys(){
            return this.dataSource.map(item=>item.roleId)
        }
    },
    watch: {

    },
    
    cteated() {

    },
    mounted() {
        this.getDepts()
    },
    methods: {
        handleClose(){
            this.$emit("update:open", false)
        },
        handleSelect(data){
            this.selectData = this.$refs.deptTreeRef.getCheckedNodes().filter(item=>item.children==null)
        },
        handleCancelSelection(){
            // this.selectData=[]
            this.$refs.userTable.clearSelection()
        },
        handleConfirmSelection(){
            if(this.selectData.length==0){
                return this.$message.error("请选择用户")
            }
            this.$emit("select-complete", this.selectData)
            this.handleClose()
        },
        getDepts(){
            api.treeOrgDept().then(res=>{
                this.departmentData = res.data
            })
        }
    },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body{
    padding: 20px;
}
::v-deep .disable-all-select{
    .el-checkbox{
        display: none;
    }
}
.department-picker__info{
    position: relative;
    padding:12px;
    background-color: #dff1ff;
    margin-bottom:10px;
    .btn-selection{
        position: absolute;
        right:10px;
        top:7px;
    }
}

.department-picker__container {
    height: 500px;
    .department-panel__scroll{
        height:100%;
        overflow: auto;
    }
}
</style>
